<script setup lang="ts">
import {ref, onMounted, onUpdated, nextTick} from "vue";

import {showToast} from "vant";
import {loginApi} from "@/api/userApi.ts";
import {useI18n} from "vue-i18n";

import {useRouter} from "vue-router";
import {useStore} from "vuex";

const {t} = useI18n()

const router = useRouter();
const store = useStore();

const form = ref({
  account: '',
  password: ''
})

const submit = () => {

  if (form.value.account == '') {
    showToast(t('placeholder.accountMobileEmpty'));
    return false;
  }

  if (form.value.password == '') {
    showToast(t('placeholder.passwordEmpty'));
    return false;
  }

  store.state.loadingState = true;
  loginApi({
    account: form.value.account,
    password: form.value.password
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      //保存token
      localStorage.setItem('token', res.data.token);
      router.push({name: 'index'})
    }
  })
}
</script>

<template>
  <div class="login">
    <div class="form">
      <p style="font-size: 25px;font-weight: bold;margin-bottom: 35px;">{{ $t('login.title') }}</p>

      <div class="field-item">
        <label>{{ $t('login.account') }}</label>
        <input type="text" :placeholder="$t('placeholder.accountMobileEmpty')" v-model="form.account"/>
      </div>
      <div class="field-item">
        <label>{{ $t('login.password') }}</label>
        <input type="password" :placeholder="$t('placeholder.passwordEmpty')" v-model="form.password"/>
      </div>
    </div>

    <div class="btn" @click="submit()">
      <span>{{ $t('login.btn') }}</span>
    </div>

    <div class="tip">
      <span>{{ $t('login.noAccount') }}</span>
      <router-link :to="{name:'register'}" style="color: #e8af2e">{{ $t('login.register') }}</router-link>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../less/login.less";
</style>